
import React, { useEffect, useState } from 'react';
import { Button, Divider, Table, Space, Tag, Modal, Form, Input, notification } from 'antd';
import WeightEcharts from './WeightEcharts';
import type { ColumnsType } from 'antd/es/table';
import Index from '../../../../../../api/Inedx';
import { useForm } from 'antd/es/form/Form';
import type { DatePickerProps } from 'antd';
import { DatePicker } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import moment from 'moment';
interface Props { weightList: any }


interface DataType {
    key: number;
    weightId: number;
    weightTime: string;
    weightWeight: number;
    datasorigin: string;
    residentId: number;
}


function Weight(props: Props) {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [weightId, setWeightId] = useState("")
    const [form] = useForm()
    const dispatch = useDispatch()
    const weightList = useSelector((state: any) => { return state.WTreducer.WeightList })
    const residentId = useSelector((state: any) => { return state.WTreducer.residentId })

    let getWeightList = async () => {
        let res = await Index.Resident.GetWeightList({ residentId })
        console.log(res);
        if (res.data.code === "200") {
            res.data.data.map((item: any) => {
                item.key = item.weightId
                item.datasorigin = "用户记录"
            })
            dispatch({ type: "SAVE_WEIGHTLIST", payload: res.data.data })
        } else {
            dispatch({ type: "SAVE_WEIGHTLIST", payload: res.data.data })
        }
    }


    useEffect(() => {

    }, [])

    const set = (row: any) => {
        setIsModalOpen(true);
        form.setFieldValue("weightWeight", row.weightWeight);
        // let a = moment(row.weightTime._d).format("YYYY-MM-DD HH:mm:ss")
        // console.log(a);
        // form.setFieldValue("weightTime", a);
        setWeightId(row.weightId)
    }
    const onFinish = async (value: any) => {//发送修改体重数据的请求
        console.log(value);
        value.weightTime = moment(value.weightTime._d).format("YYYY-MM-DD HH:mm:ss")//处理时间格式
        let res = await Index.Resident.SetWeight({ residentId, weightId, ...value })//发请求
        console.log(res);
        if (res.data.code === "200") {
            getWeightList()//请求成功调获取接口,刷新表格
            setIsModalOpen(false);//关闭对话框
            notification.success({ message: res.data.message })
        } else {
            notification.error({ message: "修改失败!" })
        }
    }
    const deletes = async (residentId: any, weightId: any) => {
        let res = await Index.Resident.DeleteWeight({ residentId, weightId })
        console.log(res);
        if (res.data.code === "200") {
            getWeightList()
            notification.success({ message: res.data.message })
        } else {
            notification.error({ message: "删除失败!" })
        }
    }
    const columns: ColumnsType<DataType> = [
        {
            title: '测量时间',
            dataIndex: 'weightTime',
            key: 'weightTime',
        },
        {
            title: '数值(kg)',
            dataIndex: 'weightWeight',
            key: 'weightWeight',
        },
        {
            title: '评估',
            key: 'test',
            render: (_, record: any) => {
                if (record.weightWeight < 50) {
                    return (<Tag color="gold">偏瘦</Tag>)
                } else if (record.weightWeight >= 50 && record.weightWeight <= 70) {
                    return (<Tag color="green">正常</Tag>)
                } else {
                    return (<Tag color="red">偏胖</Tag>)
                }
            }
        },
        {
            title: '数据来源',
            key: 'datasorigin',
            dataIndex: 'datasorigin',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => { set(record) }}>编辑</a>
                    <a onClick={() => { deletes(record.residentId, record.weightId) }}>删除</a>
                </Space>
            ),
        },
    ];
    const data: DataType[] = weightList


    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };


    let onChange: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
    };





    return (
        <div className="card">
            <div className='left'>
                <WeightEcharts></WeightEcharts>
            </div>
            <Divider type='vertical'></Divider>
            <div className='right'>
                <span className='title32'>体重记录</span>
                <Table columns={columns} dataSource={data} scroll={{ y: 400, x: 0 }} />
            </div>
            <Modal title="编辑" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={false}>
                <Form layout="vertical" onFinish={(value) => { onFinish(value) }} form={form}>
                    <Form.Item
                        label="测量时间"
                        name="weightTime"
                        rules={[{ required: true, message: '请输入时间' }]}
                    >
                        <DatePicker onChange={onChange} placeholder="请输入日期" />
                    </Form.Item>
                    <Form.Item
                        label="数值"
                        name="weightWeight"
                        rules={[{ required: true, message: '请输入数值' }]}
                    >
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary' htmlType='submit'>保存</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}

export default Weight;